<template>
  <div>
    <span>全选:</span>
    <input v-model="isAll" type="checkbox" />
    <button @click="rev">反选</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <input v-model="item.c" type="checkbox" />
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
// 案例: 全选反选
// 功能1: 渲染 
/* 
1.1 准备数据 (静态页面中有)
1.2 使用 v-for 循环渲染 li
1.3 使用v-model 双向绑定每一个小选框
*/
// 功能2: 小选影响全选
/*
2.1 定义了一个计算属性, 在计算属性中统计所有的C的状态
2.2 使用every 来统计, 只有一个是 false 就返回 false
2.3 使用v-model 双向绑定到全选框
*/
// 功能3: 全选影响小选
/*
3.1 将计算属性携程完整写法
3.2 用户勾选全选框,会触发set的执行
3.3 将set的参数设置给每一个C即可实现
*/
// 功能4: 反选
/*
4.1绑定点击事件
4.2修改所有的C的状态为当前的反状态即可
*/
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  methods: {
    rev(){
      this.arr.forEach(item => item.c =!item.c)
    }
  },
  computed: {
    //需要使用完整写法
    isAll:{
      get(){
        //必须要有return
        //这个返回值根据所有小选框的状态来决定
        //当所有的C都是true就返回true
        //只有一个c是false就返回false
        return this.arr.every(item=> item.c)
      },
      set(val){
        //将val 赋值给每一个C就实现了功能
        console.log(val);
        this.arr.forEach(item => item.c =val)
      }
    }
  }
};
</script>

<style>
</style>